<template>
    <input :value="value"
           @blur="vad($event)"
           @input="vad($event)"
           :disabled="protect"
           :placeholder="placeholder">
</template>
<script>
    import rules from "./rules"

    export default {
        name: 'cInput',
        componentName: 'cInput',
        data(){
            return {
                validateMsg: "",
                pass: false,
                init: true,
                islazy: this.lazy || false,
                protect:this.disabled ||false,  //保护异步请求操作
                isAsyncExist:false              //验证列里面是否存在 异步
            }
        },
        props: {
            name:String,
            value: [Object, Array, String],
            rules: String,
            placeholder: String,
            lazy: Boolean,
            disabled: Boolean,
        },
        /*methods: {
            vad(e){
                console.log(e);
                console.log(this);
                //不可逆 的init Boolean
                (this.init) && (this.init=false);
                //如果是 懒模式 直接丢弃 input 执行线
                if ((this.islazy && e.type == "input")) return;

                let val = e.target.value;
                let _this = this;
                _this.$emit("input", val)

                if(!this.islazy && e.type=="blur" && !this.pass){
                    return
                }
               this.rulesValidate(e ,e.type)
                   .then(function (res) {
                       _this.pass = true

                     if(res){
                         _this.validateMsg = ""
                         _this.$emit("validate", {
                             n:_this.name,
                             p: _this.pass,
                             m:_this.validateMsg
                         })
                     }

                }).catch(function (res) {
                    console.log("catch:" + res)
                    _this.pass = false
                    _this.validateMsg = res
//                  _this.$emit("input",val)
                    _this.$emit("validate",{
                        n:_this.name,
                        p: _this.pass,
                        m:_this.validateMsg
                    })
                });
            },
            async rulesValidate(e,type){
                let _this =this;
                let val = e.target.value;
                let _rules = JSON.parse(this.rules)
                //不可逆的 Boolean 判断这里轮验证是否 通过
                let pas = true;

                //验证列里面是否存在 异步请求 并标记
                if(_rules.some(function (d) {
                        return d.async == true;
                    })){
                    (!this.isAsyncExist) && (this.isAsyncExist=true)
                }


                for (let doc of _rules) {
                    //如果是异步请求验证 并且 不是懒模式 当前触发事件是 input 跳过这次验证
                    if((doc.async==true && !this.islazy && type=="input") ||
                        //非异步请求验证 并且 不是懒模式  当前触发事件是 blur 跳过这次验证
                        (!doc.async && !this.islazy && type=="blur")){
                        continue;
                    }

                    if (doc.async) {

                       //如果是异步 请求模式 开启保护 disabled = true
                        this.protect = true
                    }
                    await rules[doc.type](val).catch(function (res) {
                        pas = false;
                    });
                    //异步请求结束后 关闭保护 （有一个问题 如果 一开始就是 禁用 ）
                    (this.protect) && (this.protect=false)
                    //如果为 通过 返回 终端执行  并返回
                    if (!pas) return Promise.reject(doc.msg)
                }
                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~@" + pas + "@~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~@" + this.isAsyncExist + "@~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
                if(!this.islazy && type=="input" && this.isAsyncExist){
                    console.log("静态异步通过-等待异步请求验证")
                    return Promise.resolve(false)
                }
                return Promise.resolve(true);

            }
        },*/
        mounted(){
//            this.dispatch('ElForm', 'el.form.addField', [this]);
            var parent = this.$parent || this.$root;
            console.log(parent)
            parent.$emit.apply(parent, ['el.form.addField',this]);
        }
    };
</script>
